<template>
  <div class="ele-body ele-body-card">
    <!-- 顶部卡片 -->
    <a-card
      :bordered="false"
      :body-style="{padding: '20px'}">
      <div class="ele-cell workplace-user-card">
        <div class="ele-cell-content ele-cell">
          <a-avatar :size="68" :src="loginUser.avatar"/>
          <div class="ele-cell-content">
            <h4 class="ele-elip">早安，{{ loginUser.nickname }}，开始您一天的工作吧！</h4>
            <div class="ele-elip ele-text-secondary">
              <cloud-outlined/>
<!--              今日多云转阴，18℃ -22℃，出门记得穿外套哦~-->
              <em>{{ weather }}</em>
            </div>
          </div>
        </div>
      </div>
    </a-card>
    <!-- 快捷方式块 -->
<!--    <a-row :gutter="16">-->
<!--      <a-col :lg="3" :md="6" :sm="12" :xs="12">-->
<!--        <a-card-->
<!--          :bordered="false"-->
<!--          hoverable-->
<!--          :body-style="{padding: 0}">-->
<!--          <router-link-->
<!--            to="/system/user"-->
<!--            class="app-link-block">-->
<!--            <user-outlined class="app-link-icon"/>-->
<!--            <div class="app-link-title">用户</div>-->
<!--          </router-link>-->
<!--        </a-card>-->
<!--      </a-col>-->
<!--      <a-col :lg="3" :md="6" :sm="12" :xs="12">-->
<!--        <a-card-->
<!--          :bordered="false"-->
<!--          hoverable-->
<!--          :body-style="{padding: 0}">-->
<!--          <router-link-->
<!--            to="/restaurant/material/cost"-->
<!--            class="app-link-block">-->
<!--            <fund-projection-screen-outlined-->
<!--              class="app-link-icon"-->
<!--              style="color: #ff9c6e;"/>-->
<!--            <div class="app-link-title">成本管理</div>-->
<!--          </router-link>-->
<!--        </a-card>-->
<!--      </a-col>-->
<!--      <a-col :lg="3" :md="6" :sm="12" :xs="12">-->
<!--        <a-card-->
<!--          :bordered="false"-->
<!--          hoverable-->
<!--          :body-style="{padding: 0}">-->
<!--          <router-link-->
<!--            to="/restaurant/sale/vegetableMenu"-->
<!--            class="app-link-block">-->
<!--            <shopping-cart-outlined-->
<!--              class="app-link-icon"-->
<!--              style="color: #95de64;"/>-->
<!--            <div class="app-link-title">菜单</div>-->
<!--          </router-link>-->
<!--        </a-card>-->
<!--      </a-col>-->
<!--      <a-col :lg="3" :md="6" :sm="12" :xs="12">-->
<!--        <a-card-->
<!--          :bordered="false"-->
<!--          hoverable-->
<!--          :body-style="{padding: 0}">-->
<!--          <router-link-->
<!--            to="/restaurant/sale/saleOrder"-->
<!--            class="app-link-block">-->
<!--            <file-search-outlined-->
<!--              class="app-link-icon"-->
<!--              style="color: #b37feb;"/>-->
<!--            <div class="app-link-title">销售订单</div>-->
<!--          </router-link>-->
<!--        </a-card>-->
<!--      </a-col>-->
<!--      <a-col :lg="3" :md="6" :sm="12" :xs="12">-->
<!--        <a-card-->
<!--          :bordered="false"-->
<!--          hoverable-->
<!--          :body-style="{padding: 0}">-->
<!--          <router-link-->
<!--            to="/restaurant/material/materialOrder"-->
<!--            class="app-link-block">-->
<!--            <credit-card-outlined-->
<!--              class="app-link-icon"-->
<!--              style="color: #ffd666;"/>-->
<!--            <div class="app-link-title">材料订单</div>-->
<!--          </router-link>-->
<!--        </a-card>-->
<!--      </a-col>-->
<!--      <a-col :lg="3" :md="6" :sm="12" :xs="12">-->
<!--        <a-card-->
<!--          :bordered="false"-->
<!--          hoverable-->
<!--          :body-style="{padding: 0}">-->
<!--          <router-link-->
<!--            to="/restaurant/material/stockRecord"-->
<!--            class="app-link-block">-->
<!--            <control-outlined-->
<!--              class="app-link-icon"-->
<!--              style="color: #ffc069;"/>-->
<!--            <div class="app-link-title">库存管理</div>-->
<!--          </router-link>-->
<!--        </a-card>-->
<!--      </a-col>-->
<!--      <a-col :lg="3" :md="6" :sm="12" :xs="12">-->
<!--        <a-card-->
<!--          :bordered="false"-->
<!--          hoverable-->
<!--          :body-style="{padding: 0}">-->
<!--          <router-link-->
<!--            to="/restaurant/material/material"-->
<!--            class="app-link-block">-->
<!--            <mail-outlined-->
<!--              class="app-link-icon"-->
<!--              style="color: #5cdbd3;"/>-->
<!--            <div class="app-link-title">材料</div>-->
<!--          </router-link>-->
<!--        </a-card>-->
<!--      </a-col>-->
<!--      <a-col :lg="3" :md="6" :sm="12" :xs="12">-->
<!--        <a-card-->
<!--          :bordered="false"-->
<!--          hoverable-->
<!--          :body-style="{padding: 0}">-->
<!--          <router-link-->
<!--            to="/restaurant/sale/paymentRecord"-->
<!--            class="app-link-block">-->
<!--            <tags-outlined-->
<!--              class="app-link-icon"-->
<!--              style="color: #ff85c0;"/>-->
<!--            <div class="app-link-title">收款管理</div>-->
<!--          </router-link>-->
<!--        </a-card>-->
<!--      </a-col>-->

<!--    </a-row>-->

    <a-row :gutter="16">

      <a-col :lg="12" :md="24" :sm="24" :xs="24">
        <a-card
          style="height: 463px;width: 100%"
          :bordered="false"
          :body-style="{padding: '10px 8px 10px 8px'}">
          <div id="orderCountChart" style="width: 90%; height: 400px">
          </div>
        </a-card>
      </a-col>

      <a-col :lg="12" :md="24" :sm="24" :xs="24">
        <a-card
          style="height: 463px;width: 100%"
          :bordered="false"
          :body-style="{padding: '10px 8px 10px 8px'}">
          <div id="repairTypeChart" style="width: 90%; height: 400px">
          </div>
        </a-card>
      </a-col>
    </a-row>

    <a-modal v-model:visible="faultApp.visible" :footer="null" :width="850" style="width: 800px;height: 800px">
      <div id="faultChart" style="width: 800px; height: 400px">

      </div>
    </a-modal>
  </div>
</template>

<script>
import {
  CloudOutlined,
  // UserOutlined,
  // ShoppingCartOutlined,
  // FundProjectionScreenOutlined,
  // FileSearchOutlined,
  // CreditCardOutlined,
  // MailOutlined,
  // TagsOutlined,
  // ControlOutlined,
  // MenuOutlined,
  // TrophyOutlined
} from '@ant-design/icons-vue';
// import draggable from 'vuedraggable';
import {onMounted,ref,reactive} from "vue";
import {jsonp} from 'vue-jsonp';
// import axios from 'axios';
import * as echarts from 'echarts';

import {RepairOrderService} from "@/views/repair/repairManagement/repairOrder/repairOrderService";

export default {
  name: 'DashboardWorkplace',
  components: {
    CloudOutlined,
    // UserOutlined,
    // ShoppingCartOutlined,
    // FundProjectionScreenOutlined,
    // FileSearchOutlined,
    // CreditCardOutlined,
    // MailOutlined,
    // TagsOutlined,
    // ControlOutlined,
    // MenuOutlined,
    // TrophyOutlined,
    // draggable
  },
  setup() {
    const faultApp=reactive({
      visible:false,
      title:"近日设备故障类型饼图",
      data:{}
    })
    onMounted(() => {//需要获取到element,所以是onMounted的Hook
      let orderDom=document.getElementById("orderCountChart");
      if(orderDom.getAttribute("_echarts_instance_")){
        orderDom.removeAttribute('_echarts_instance_')
      }
      let myChartOrder = echarts.init(orderDom);
      let repairDom=document.getElementById("repairTypeChart");
      if(repairDom.getAttribute("_echarts_instance_")){
        repairDom.removeAttribute('_echarts_instance_')
      }
      let repairTypeChart = echarts.init(repairDom);
      countOrders(myChartOrder)
      findCountDeviceTypeData(repairTypeChart);
      getWeather();
    });
    const countOrders = (myChart) => {
      RepairOrderService.countOrders().then(res=>{
        // console.log("orderCounts",res.data)
        // 绘制图表
        myChart.setOption({
          title: { text: "近7日订单量" },
          tooltip: {},
          xAxis: {
            data: res.data.dateList,
            axisLabel: {
              rotate: 45
            }
          },
          yAxis: {},
          series: [
            {
              name: "工单数",
              type: "line",
              data: res.data.countList,
              smooth: true
            },
          ],
        });
        window.onresize = function () {//自适应大小
          myChart.resize();
        };
      })
    }
    const findCountDeviceTypeData=(myChart)=>{
      RepairOrderService.countRepairDeviceType().then(res=>{
        // console.log("countDevice",res.data.countDatas)
        let option = {
          title: { text: "近7日维修类型统计" },
          tooltip: {},
          legend: {
            // Try 'horizontal'
            orient: 'vertical',
            right: 10,
            bottom:10
          },
          series: [
            {

              type: 'pie',
              stillShowZeroSum: false,
              data: res.data.countDatas
            }
          ]
        };
        // 绘制图表
        myChart.setOption(option);
        window.onresize = function () {//自适应大小
          myChart.resize();
        };
        // 处理点击事件并且跳转到相应的百度搜索页面
        myChart.on('click', function(params) {
          console.log(params,"pa")
          countRepairFaultTypeByDeviceType(params.name)
        });
      })
    }
    const countRepairFaultTypeByDeviceType=(deviceType)=>{
      RepairOrderService.countRepairFaultTypeByDeviceType(deviceType).then(res=>{
        faultApp.visible=true;
        setTimeout(()=>{
          let faultChart = echarts.init(document.getElementById("faultChart"));
          let option = {
            title: { text: "近日"+deviceType+"设备故障类型饼图" },
            legend: {
              // Try 'horizontal'
              orient: 'vertical',
              right: 0,
              bottom:0
            },
            series: [
              {

                type: 'pie',
                stillShowZeroSum: false,
                data: res.data.countDatas
              }
            ]
          };
          // 绘制图表
          faultChart.setOption(option);
          window.onresize = function () {//自适应大小
            faultChart.resize();
          };
        },10)
      })
    }
    let weather= ref();
    const getWeather = () => {
      let url = `https://restapi.amap.com/v3/ip?output=json&key=4cd74d77485aa7428e7902e4fb6709cd`;
      jsonp(url,  {
        output: 'jsonp'
      }).then(res => {
        console.log('res',res);

        let wUrl="https://restapi.amap.com/v3/weather/weatherInfo?city="+res.adcode+"&key=4cd74d77485aa7428e7902e4fb6709cd"
        jsonp(wUrl,  {
          output: 'jsonp'
        }).then(wRes => {
          console.log(wRes.lives)
          let w=wRes.lives[0];
          weather.value=w.city+",今日天气"+w.weather+"、"+w.temperature+"℃、风向"+w.winddirection+"、湿度"+w.humidity+"%"
        })

      }).catch(err => {
        console.log('err', err);
      })


    }
    return {
      weather,
      faultApp
    }
  },
  data() {
    return {

    };
  },
  computed: {
    // 当前登录用户信息
    loginUser() {
      return this.$store.state.user.user;
    }
  }
}
</script>

<style scoped>
/** 用户卡片 */
.workplace-user-card .ele-cell-content {
  overflow: hidden;
}

.workplace-user-card h4 {
  margin-bottom: 6px;
}

.workplace-count-group {
  white-space: nowrap;
  text-align: right;
  flex-shrink: 0;
}

.workplace-count-item {
  display: inline-block;
  margin: 0 4px 0 24px;
}

.workplace-count-name {
  margin-left: 8px;
}

@media screen and (max-width: 992px) {
  .workplace-count-item {
    margin: 0 2px 0 12px;
  }
}

@media screen and (max-width: 768px) {
  .workplace-user-card {
    display: block;
  }

  .workplace-count-group {
    margin-top: 8px;
  }
}

/** 快捷方式 */
.app-link-block {
  padding: 12px;
  text-align: center;
  display: block;
  color: inherit;
}

.app-link-block .app-link-icon {
  color: #69c0ff;
  font-size: 30px;
  margin: 6px 0 10px 0;
}

/** 时间轴 */
.ele-scrollbar-hover :deep(.ant-timeline-item-last > .ant-timeline-item-content) {
  min-height: auto;
}

/** 本月目标 */
.workplace-goal-group {
  padding: 48px 0;
  text-align: center;
  position: relative;
}

.workplace-goal-group .workplace-goal-content {
  position: absolute;
  top: 90px;
  left: 0;
  width: 100%;
}

.workplace-goal-group .workplace-goal-num {
  font-size: 40px;
}

/** 小组成员 */
.user-list-item {
  padding: 16px 18px;
}

.user-list-item + .user-list-item {
  border-top: 1px solid hsla(0, 0%, 60%, .15);
}

/** 表格拖拽 */
.ant-table-tbody tr.sortable-chosen {
  background: hsla(0, 0%, 60%, .1) !important;
}

.ant-table-tbody tr.sortable-chosen td {
  background: none !important;
}

/deep/ .ant-rate {
  font-size: 16px !important;
}
</style>
